{% extends "base.html" %}

{% block title %}任务管理{% endblock %}

{% block page_title %}任务管理{% endblock %}

{% block extra_css %}
<style>
.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.task-filters {
    display: flex;
    gap: 15px;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-group label {
    color: #2c3e50;
    font-weight: 500;
}

.filter-group select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #2c3e50;
}

.task-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.task-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.task-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.task-card.priority-high {
    border-left-color: #e74c3c;
}

.task-card.priority-medium {
    border-left-color: #f39c12;
}

.task-card.priority-low {
    border-left-color: #3498db;
}

.task-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.task-title {
    color: #2c3e50;
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}

.task-status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.status-pending {
    background: #fff3e0;
    color: #ef6c00;
}

.status-in-progress {
    background: #e3f2fd;
    color: #1565c0;
}

.status-completed {
    background: #e8f5e9;
    color: #2e7d32;
}

.task-info {
    margin-bottom: 15px;
}

.task-info p {
    margin: 5px 0;
    color: #7f8c8d;
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-actions {
    display: flex;
    gap: 10px;
}

.task-actions button {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.btn-start {
    background: #3498db;
    color: white;
}

.btn-start:hover {
    background: #2980b9;
}

.btn-complete {
    background: #2ecc71;
    color: white;
}

.btn-complete:hover {
    background: #27ae60;
}

.btn-view {
    background: #f1c40f;
    color: white;
}

.btn-view:hover {
    background: #f39c12;
}
</style>
{% endblock %}

{% block content %}
<div class="task-header">
    <div class="task-filters">
        <div class="filter-group">
            <label><i class="fas fa-filter"></i> 状态</label>
            <select id="status-filter">
                <option value="">全部</option>
                <option value="pending">待处理</option>
                <option value="in_progress">进行中</option>
                <option value="completed">已完成</option>
            </select>
        </div>
        <div class="filter-group">
            <label><i class="fas fa-tasks"></i> 类型</label>
            <select id="type-filter">
                <option value="">全部</option>
                <option value="irrigation">灌溉</option>
                <option value="fertilizer">施肥</option>
                <option value="pesticide">植保</option>
            </select>
        </div>
        <div class="filter-group">
            <label><i class="fas fa-map-marked-alt"></i> 农田</label>
            <select id="field-filter">
                <option value="">全部</option>
                {% for field in fields %}
                <option value="{{ field.id }}">{{ field.name }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
</div>

<div class="task-grid">
    {% for task in tasks %}
    <div class="task-card priority-{{ task.priority }}" 
         data-status="{{ task.status }}" 
         data-type="{{ task.task_type }}" 
         data-field="{{ task.field_id }}">
        <div class="task-header">
            <h3 class="task-title">{{ task.title }}</h3>
            <span class="task-status status-{{ task.status }}">
                {{ {'pending': '待处理', 'in_progress': '进行中', 'completed': '已完成'}[task.status] }}
            </span>
        </div>
        <div class="task-info">
            <p><i class="fas fa-map-marker-alt"></i> 农田: {{ task.field_name }}</p>
            <p><i class="fas fa-calendar-alt"></i> 创建时间: {{ task.created_at|datetime }}</p>
            <p><i class="fas fa-user"></i> 负责人: {{ task.assigned_to or '未分配' }}</p>
        </div>
        <div class="task-actions">
            {% if task.status == 'pending' %}
            <button class="btn-start" onclick="startTask('{{ task.id }}')">
                <i class="fas fa-play"></i> 开始
            </button>
            {% elif task.status == 'in_progress' %}
            <button class="btn-complete" onclick="completeTask('{{ task.id }}')">
                <i class="fas fa-check"></i> 完成
            </button>
            {% endif %}
            <button class="btn-view" onclick="viewTask('{{ task.id }}')">
                <i class="fas fa-eye"></i> 查看
            </button>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block scripts %}
<script>
async function updateTaskStatus(taskId, status) {
    showLoading();
    try {
        const response = await fetch(`/api/tasks/${taskId}/status`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ status })
        });
        
        if (response.ok) {
            window.location.reload();
        } else {
            alert('更新任务状态失败，请重试');
        }
    } catch (error) {
        alert('更新任务状态失败，请重试');
    } finally {
        hideLoading();
    }
}

function startTask(taskId) {
    updateTaskStatus(taskId, 'in_progress');
}

function completeTask(taskId) {
    updateTaskStatus(taskId, 'completed');
}

function viewTask(taskId) {
    window.location.href = `/task-management/view/${taskId}`;
}

// 任务筛选
function filterTasks() {
    const status = document.getElementById('status-filter').value;
    const type = document.getElementById('type-filter').value;
    const fieldId = document.getElementById('field-filter').value;
    
    document.querySelectorAll('.task-card').forEach(card => {
        const matchStatus = !status || card.dataset.status === status;
        const matchType = !type || card.dataset.type === type;
        const matchField = !fieldId || card.dataset.field === fieldId;
        
        card.style.display = matchStatus && matchType && matchField ? 'block' : 'none';
    });
}

// 添加筛选器事件监听
document.getElementById('status-filter').addEventListener('change', filterTasks);
document.getElementById('type-filter').addEventListener('change', filterTasks);
document.getElementById('field-filter').addEventListener('change', filterTasks);
</script>
{% endblock %} 